<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas实现各种炫酷的仪表盘动画DEMO演示06</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
		.btn-container{
			padding: 1em 0;
			text-align: center;
		}
	.container{
		width: 700px;
		margin: 50px auto;
	}
</style>
<script src="js/gauge.min.js"></script>
</head>
<body>
<div class="zzsc-container">
	<header class="zzsc-header">
		<div class="zzsc-demo center">
		  <a href="index.html">radial</a>
		  <a href="radial-component.html">radial-component</a>
		  <a href="linear-component.html">linear-component</a>
		  <a href="issue-63.html">issue-63</a>
		  <a href="async.html">async</a>
		  <a href="scripted.html" class="current">scripted</a>
		</div>
	</header>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<div class="container">
		<canvas id="gauge1"></canvas>
		<canvas id="gauge2"></canvas>
		<div id="console"></div>
	</div>
</div>

<script>
	new RadialGauge({
		renderTo: 'gauge1',
		width: 300,
		height: 300,
		units: 'Km/h',
		title: false,
		value: 0,
		minValue: 0,
		maxValue: 220,
		majorTicks: [
			'0','20','40','60','80','100','120','140','160','180','200','220'
		],
		minorTicks: 2,
		strokeTicks: false,
		highlights: [
			{ from: 0, to: 50, color: 'rgba(0,255,0,.15)' },
			{ from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
			{ from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
			{ from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
			{ from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
		],
		colorPlate: '#222',
		colorMajorTicks: '#f5f5f5',
		colorMinorTicks: '#ddd',
		colorTitle: '#fff',
		colorUnits: '#ccc',
		colorNumbers: '#eee',
		colorNeedle: 'rgba(240, 128, 128, 1)',
		colorNeedleEnd: 'rgba(255, 160, 122, .9)',
		valueBox: true,
		animationRule: 'bounce',
		animationDuration: 500
	}).draw();

	new RadialGauge({ renderTo: 'gauge2' }).draw();

	if (!window.addEventListener) {
		window.addEventListener = function(evt, listener) {
			window.attachEvent('on' + evt, listener);
		};
	}
	if (!Array.prototype.forEach) {
		Array.prototype.forEach = function(cb) {
			var i = 0, s = this.length;
			for (; i < s; i++) {
				cb && cb(this[i], i, this);
			}
		}
	}
	// animage all gauges on a page
	window.addEventListener('load', function() {
		document.gauges.forEach(function(gauge) {
			setInterval(function() {
				gauge.value = Math.random() *
					(gauge.options.maxValue - gauge.options.minValue) +
					gauge.options.minValue;
			}, gauge.animation.duration + 500);
		});
	});
</script>
</body>
</html>